<template>
    <el-button type="primary">按钮1</el-button>
    <el-card>
        <el-color-picker
                    v-model="color"
                    @change="setColor"
                    show-alpha
                    size="small"
                    trigger="click"
                    :predefine="predefineColors"
                />
    </el-card>
    <el-card>
    <div class="box">
      <img :src="userStore.avatar" alt="" class="avatar" />
      <div class="bottom">
        <h3 class="title">欢迎,{{ userStore.username }}</h3>
        <p class="subtitle">后端平台</p>
      </div>
    </div>
  </el-card>
  <div class="bottoms">
    <svg-icon name="welcome" width="600px" height="300px"></svg-icon>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
    import { useUserStore } from '@/store/modules/user'
    //获取存储用户信息的仓库对象
    let userStore = useUserStore()

    const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577'
])
const setColor = () => {
    const html = document.documentElement
    console.log('---color', color.value)
    html.style.setProperty('--el-color-primary', color.value)
}
</script>

<style lang="scss" scoped>
    .box {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .bottom {
    margin-left: 20px;

    .title {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 30px;
    }

    .subtitle {
      font-style: italic;
      color: skyblue;
    }
  }
}
.bottoms {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>

